<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link href="../css/mui.min.css" rel="stylesheet">
    <style>
      #header {
        border-bottom: 1px solid #ccc;
      }
      #ordinary, #intelligent {
        white-space: normal;
        background-color: #5571be;
        color: #fff;
        outline: none;
      }
      li {
        list-style: none;
      }
    </style>
</head>
<body>
	<div  id="wrap">
    <!-- <div id="header"> -->
        <!-- <h1>车辆管理</h1> -->
    <!-- </div> -->
    <div id="main">

      <div class="mui-content" id="muiContent"></div>
      <div class="mui-content">
        <div class="mui-row">
          <div class="mui-col-xs-6">
            <!-- <ul class="mui-table-view"> -->
              <li class="mui-table-view-cell" style="text-align:center;">
                <!-- <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> -->
                <button id="intelligent" type="button">Smart Bin Monitoring</button>
              </li>
            <!-- </ul> -->
          </div>
          <div class="mui-col-xs-6" style="text-align:center;">
            <!-- <ul class="mui-table-view"> -->
              <li class="mui-table-view-cell">
                <button id="ordinary">Garbage Bin Monitoring</button>
              </li>
            <!-- </ul> -->
          </div>
          <!-- <div class="mui-col-xs-4">
              <li class="mui-table-view-cell">
                <button id="cars">工作量统计</button>
              </li>
          </div> -->
        </div>
      </div>
      </div>
	</div>
</body>
<script id="template" type="text/x-dot-template">
{{ for (var key in it) { }}
<div class="mui-row">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell">Smart Bins Are On-Line
        <span class="mui-badge mui-badge-success">{{=it[key].SmartBinOnline}}</span>
    </li>
    <li class="mui-table-view-cell">Smart Bins Are Off-Line
        <span class="mui-badge mui-badge-danger">{{=it[key].SmartBinOffline}}</span>
    </li>
    <li class="mui-table-view-cell">Smart Bins Are Full
        <span class="mui-badge mui-badge-danger">{{=it[key].SmartBinFull}}</span>
    </li>
    <li class="mui-table-view-cell">Garbage Bins Are On-line
        <span class="mui-badge mui-badge-success">{{=it[key].GarbageBinOnline}}</span>
    </li>
    <li class="mui-table-view-cell">Garbage Bins Are Off-line
        <span class="mui-badge mui-badge-danger">{{=it[key].GarbageBinOffline}}</span>
    </li>
    <li class="mui-table-view-cell">Garbage Bins Are Full
        <span class="mui-badge mui-badge-danger">{{=it[key].GarbageBinFull}}</span>
    </li>
  </ul>
</div>
{{ } }}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/ajax.js"></script>
<!-- <script type="text/javascript"  src="../script/mui.min.js"></script> -->
<script>
  apiready = function() {
    let intelligent = $api.byId('intelligent');
    let ordinary = $api.byId('ordinary');
    var muiContent = $api.byId('muiContent');
    var template = $api.byId('template');
    var interText = doT.template(template.innerHTML);
    getGarbage(interText);
    intelligent.addEventListener('click', function() {
      api.openWin({
          name: 'laji2',
          url: './laji2.html',
          bounces: false,
          slidBackEnabled: false
      });
    });
    ordinary.addEventListener('click', function() {
      api.openWin({
          name: 'laji',
          url: './laji.html',
          bounces: false,
          slidBackEnabled: false
      });
    });
  }
</script>
</html>
